<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 搜索关键词
const searchQuery = ref('');
// 搜索历史
const searchHistory = ref<string[]>([]);
// 热门搜索
const hotSearches = ref(['美食探店', '旅游攻略', '健身教程', '科技前沿', '时尚穿搭', '电影推荐', '读书分享', '职场经验']);
// 搜索结果
const searchResults = ref<any[]>([]);
// 是否显示搜索结果
const showResults = ref(false);

// 初始化搜索历史
onMounted(() => {
  // 从本地存储获取搜索历史
  const savedHistory = localStorage.getItem('searchHistory');
  if (savedHistory) {
    searchHistory.value = JSON.parse(savedHistory);
  }
});

// 执行搜索
const performSearch = () => {
  if (!searchQuery.value.trim()) return;

  // 添加到搜索历史
  if (!searchHistory.value.includes(searchQuery.value)) {
    searchHistory.value.unshift(searchQuery.value);
    // 最多保留10条历史记录
    if (searchHistory.value.length > 10) {
      searchHistory.value.pop();
    }
    // 保存到本地存储
    localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
  }

  // 模拟搜索结果
  searchResults.value = [
    {
      id: 1,
      title: `${searchQuery.value}相关结果1`,
      content: '这是一段关于搜索结果的描述内容，展示了与用户搜索关键词相关的信息摘要。',
      author: '用户名1',
      likes: 128,
      comments: 24,
      time: '2小时前'
    },
    {
      id: 2,
      title: `${searchQuery.value}相关结果2`,
      content: '这是另一段关于搜索结果的描述内容，提供了更多与用户搜索关键词相关的信息。',
      author: '用户名2',
      likes: 86,
      comments: 12,
      time: '5小时前'
    },
    {
      id: 3,
      title: `${searchQuery.value}相关结果3`,
      content: '这是第三段搜索结果的描述内容，为用户提供更多相关的信息选择。',
      author: '用户名3',
      likes: 243,
      comments: 37,
      time: '1天前'
    }
  ];

  // 显示搜索结果
  showResults.value = true;
};

// 清空搜索历史
const clearHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem('searchHistory');
};

// 点击历史记录或热门搜索
const selectSearchItem = (item: string) => {
  searchQuery.value = item;
  performSearch();
};

// 返回搜索页面
const backToSearch = () => {
  showResults.value = false;
  searchQuery.value = '';
};

// 定义emit
const emit = defineEmits(['close']);

// 关闭搜索页面
const closeSearch = () => {
  emit('close');
};
</script>

<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input-wrapper">
        <div class="back-button" @click="closeSearch">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
        </div>
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索感兴趣的内容" 
          class="search-input"
          @keyup.enter="performSearch"
        >
        <div class="search-button" @click="performSearch">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </div>
      </div>
    </div>

    <!-- 搜索结果页面 -->
    <div v-if="showResults" class="search-results">
      <div class="results-header">
        <h3>搜索结果</h3>
        <span class="result-count">共找到 {{ searchResults.length }} 条结果</span>
      </div>

      <div class="result-list">
        <div v-for="result in searchResults" :key="result.id" class="result-item">
          <h4 class="result-title">{{ result.title }}</h4>
          <p class="result-content">{{ result.content }}</p>
          <div class="result-meta">
            <span class="result-author">{{ result.author }}</span>
            <span class="result-time">{{ result.time }}</span>
            <div class="result-stats">
              <span class="result-likes">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
                {{ result.likes }}
              </span>
              <span class="result-comments">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                </svg>
                {{ result.comments }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索建议页面 -->
    <div v-else class="search-suggestions">
      <!-- 搜索历史 -->
      <div class="search-section" v-if="searchHistory.length > 0">
        <div class="section-header">
          <h3>搜索历史</h3>
          <span class="clear-button" @click="clearHistory">清空</span>
        </div>
        <div class="tag-container">
          <span 
            v-for="(item, index) in searchHistory" 
            :key="index" 
            class="history-tag"
            @click="selectSearchItem(item)"
          >
            {{ item }}
          </span>
        </div>
      </div>

      <!-- 热门搜索 -->
      <div class="search-section">
        <div class="section-header">
          <h3>热门搜索</h3>
        </div>
        <div class="tag-container">
          <span 
            v-for="(item, index) in hotSearches" 
            :key="index" 
            class="hot-tag"
            @click="selectSearchItem(item)"
          >
            <span class="hot-index" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</span>
            {{ item }}
          </span>
        </div>
      </div>

      <!-- 搜索发现 -->
      <div class="search-section">
        <div class="section-header">
          <h3>搜索发现</h3>
        </div>
        <div class="discovery-grid">
          <div class="discovery-item">
            <div class="discovery-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="9" y1="9" x2="15" y2="9"></line>
                <line x1="9" y1="15" x2="15" y2="15"></line>
              </svg>
            </div>
            <span>话题榜</span>
          </div>
          <div class="discovery-item">
            <div class="discovery-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </div>
            <span>排行榜</span>
          </div>
          <div class="discovery-item">
            <div class="discovery-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
            </div>
            <span>达人榜</span>
          </div>
          <div class="discovery-item">
            <div class="discovery-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
            </div>
            <span>联系我们</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.search-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9f9f9;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
}

.back-button {
  display: flex;
  align-items: center;
  margin-right: 8px;
  cursor: pointer;
}

.search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  color: #333;
}

.search-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #666;
}

.search-suggestions {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.search-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.clear-button {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-tag, .hot-tag {
  padding: 6px 12px;
  background-color: #fff;
  border-radius: 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hot-tag {
  display: flex;
  align-items: center;
}

.hot-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #999;
  font-size: 12px;
  margin-right: 6px;
}

.hot-index.top-three {
  background-color: #ff4d4f;
  color: #fff;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.discovery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.discovery-icon {
  margin-bottom: 6px;
  color: #1890ff;
}

.discovery-item span {
  font-size: 12px;
  color: #333;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.results-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.result-count {
  font-size: 14px;
  color: #999;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.result-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.result-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.result-stats {
  display: flex;
  gap: 12px;
}

.result-likes, .result-comments {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
